<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

</style>

<body>
    <div id="app">
        <book></book>
        <hr/>
        <book2></book2>
    </div>
</body>

</html>
<script src="./js/vue.global.js"></script>
<script>
    const { createApp, h,cloneVNode } = Vue;

    let vNode = h(
                    "div",
                    { id: "box01", class: "cls" },
                    "我是box01"
                );

    let book = {
        render() {
            return vNode;
        }
    }

    // 克隆一个虚拟节点。并且增加属性，如果属性是 ：class，style，onXxxx，那么就会使用mergeProps()的思路合并。
    let vNode2 = cloneVNode(vNode,{class:"cls02",style:"width:100px;height:100px;background-color:red",onClick:()=>{console.log("被点击了");}});

    let book2 = {
        render(){
            return vNode2
        }
    }


    // 1、创建一个应用
    let app = createApp({
        data() {
            return {
                msg: "hi"
            }
        },
        components: {
            book,book2
        }
    });



    // 2、把应用进行渲染（和模板进行关联）
    app.mount("#app");


</script>